<template>
	<swiper indicator-color="rgba(0,0,0,0)" indicator-active-color="rgba(0,0,0,0)" class="slidenav" :style="{marginTop: source.margin + 'px', marginBottom: source.margin2 + 'px'}" :display-multiple-items="4">
		<swiper-item v-for="(item, index) in source.img_list" :key="index">
			<view class="item">
				<wx-auth :type="1" :link="item"></wx-auth>
				<view class="img" :style="{ backgroundImage: 'url('+ item.url +')' }"></view>
				<view class="name" :style="{ color: item.color }">{{ item.nav_name }}</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
export default {
	props: {
		source: [Object]
	}
}
	
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';	
.slidenav {
	height: 220upx;
	.item {
		margin: 0 10upx;
		position: relative;
		image {
			width: 100%;
		}
		.img { .combackground(cover, center,top);height: 170upx; }
		.name { font-size: @minSize;text-align: center;.twoLine(1);margin: 10upx 0; }
	}
}	
</style>
